//  vue.config.js
module.exports = {
  // baseUrl: './', // url3.3 起已弃用,使用publicPath
  publicPath: '/',
  /**
   * 部署应用包时的基本 URL
   * 请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
   * 如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
   */
  outputDir: 'dist',
  /**
   * build 时生成的生产环境构建文件的目录。
   * 注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
   * 请始终使用 outputDir 而不要修改 webpack 的 output.path
   */
  assetsDir: '',
  /**
   * 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
   * 从生成的资源覆写 filename 或 chunkFilename 时，assetsDir 会被忽略。
   */
  indexPath: 'index.html',
  /**
   * 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
   */
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 54
            /*
            通常根据设计图来定这个值
            假如设计图宽750，remUnit设置为75，直接按照设计图宽高1:1还原开发
            写成了37.5，因为第三方框架(mint-ui)没有兼容px2rem ，将remUnit的值设置为一半，
            即可以1:1还原mint-ui的组件，否则会样式会有变化，例如按钮会变小。
            设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半。
            这里设置成54是适配pc端,结合flexible.js中refreshRem
            if (width / dpr > 540) {
                width = 540 * dpr;
            }
            故设置成54,可以修改refreshRem逻辑设置当前浏览器的宽度
             */
          })
        ]
      }
    }
  }
}
